<script setup>

/***
 * @import libs
 */
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

/**
 * @impoort commponents
 */
import buttomBar from '@/components/commons/buttomBar.vue';
import titleBar from '@/components/commons/titleBar.vue';
import topPlaceholder from '@/components/shopping/topPlaceholder.vue';
import searchBar from '@/components/shopping/searchBar.vue';
import goodsTypeBar from '@/components/shopping/goodsTypeBar.vue';
import goodsViewList from '@/components/shopping/goodsViewList.vue';

/**
 * @import pinia stores
 */

//pinia -> useShoppingStaticMessStore
import { useShoppingStaticMessStore } from '@/stores/shopping/shoppingStaticMess.js'

/**
 * @param goodTypeList 商品类型列表
 */
let { goodTypeList } = storeToRefs(useShoppingStaticMessStore())

/**
 * 标题内容
 */
let title = ref('品类')

</script>
<template>
  <div class="container-class">
    <topPlaceholder></topPlaceholder>
    <titleBar :title="title"></titleBar>
    <searchBar></searchBar>
    <goodsTypeBar :list="goodTypeList"></goodsTypeBar>
    <goodsViewList></goodsViewList>
    <buttomBar></buttomBar>
  </div>
</template>
<style scoped>
.container-class {
  height: 100vh;
  width: 750rpx;
  background-color: #ffefe0;
}
</style>